<template>
	<!-- 结算确认 -->
	<view class="OrderTitle">
		<view></view>
		<text class="RT1">填写收货信息</text>
	</view>
	<view class="Address" @click="HarvestSelect">
		<view>
			<view>
				<text>{{nowHarvest.name}}</text>
				<text>{{nowHarvest.phone}}</text>
				<text v-if="nowHarvest.type==1" class="FreeOfMail">默认</text>
			</view>
			<view>
				<text class="iconfont .icon-weizhi" />
				<text>{{nowHarvest.area}} {{nowHarvest.place}}</text>
			</view>
		</view>
		<view><text class="iconfont .icon-jiantouyou" /></view>
	</view>
	<view class="OrderTitle">
		<view></view>
		<text class="RT2">商品信息</text>
	</view>
	<view class="OrderGoods" v-for="(item,index) in goodsArr" :key="index">
		<image :src="'/static/Mall/'+item.goodsImg" />
		<view>
			<view>
				<text>{{item.goodsName}}</text>
				<text>x{{item.sc_num}}</text>
			</view>
			<text>{{item.sc_label}}</text>
			<text>￥{{item.sc_money}}</text>
		</view>
	</view>
	<view class="OrderTitle SettlementTitle">
		<text>商品合计</text>
		<text class="RT2">￥{{goodsMoney}}</text>
	</view>
	<view class="OrderTitle SettlementTitle Bottom">
		<text>运费</text>
		<text class="RT2"><text class="FreeOfMail">免邮</text>￥{{transportMoney}}</text>
	</view>
	<view class="Footer">
		<view @click="CustomerService">
			<text class="iconfont .icon-kefu" />
			<text>联系客服</text>
		</view>
		<view><text>￥{{goodsMoney+transportMoney}}</text><text>应付价格</text></view>
		<view @click="PayOrder">确认</view>
	</view>
</template>

<script>
	import {
		reactive
	} from 'vue';
	import store from '../../store/index.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import myRequest from '../../utils/myRequest.js';
	export default {
		setup() {
			let data = reactive({
				goodsArr: [],
				goodsMoney: 0,
				transportMoney: 10,
				moneyAll: 0,
				nowHarvest: {},
				HarvestSelect: function() {
					uni.navigateTo({
						url: 'HarvestSelect'
					});
				},
				CustomerService: function() {
					console.log("联系客服");
				},
				PayOrder: function() {
					uni.navigateTo({
						url: 'PayOrder'
					});
				},
				// 计算总价钱
				ComputeMoney: function() {
					data.goodsMoney = 0;
					data.goodsArr.forEach((item, index) => {
						data.goodsMoney += (item.sc_money * item.sc_num);
					})
				},
				//获取收货地址请求
				HarvestRequest: function() {
					myRequest({
						url: "/sC_DefaultHarvest",
						method: 'POST',
						data: {
							vipId: store.state.userdata[0].vipId,
						},
					}).then((res) => {
						if (res.data.code == 200) {
							store.commit('editUserOrderHarvest', res.data.data);
							for (let i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].type == 1) {
									store.commit('editNowUserOrderHarvest', res.data.data[i]);
									break;
								}
							}
							data.NowHarvest();
						}
					})
				},
				//获取当前收货地址
				NowHarvest: function() {
					data.nowHarvest = store.state.nowUserOrderHarvest;
				}
			});
			onLoad(() => {
				data.HarvestRequest();
				data.goodsArr = store.state.orderPayGoods;
				data.ComputeMoney();
			});
			onShow(() => {
				data.NowHarvest();
			});
			return data;
		}
	}
</script>

<style>
	@import url('~@/static/Mall/iconfont.css');

	.OrderTitle {
		display: flex;
		align-items: center;
		padding: 30rpx;
		font-size: 28rpx;
		border-bottom: 2rpx solid #E4E4E4;
	}

	.OrderTitle>view {
		margin-right: 6rpx;
		width: 4rpx;
		height: 36rpx;
		color: #18BC37;
		background-color: #3478F7;
	}

	.OrderTitle>.RT1 {
		font-weight: bold;
	}

	.OrderTitle>.RT2 {
		color: #999999;
	}

	.SettlementTitle {
		justify-content: space-between;
	}

	.FreeOfMail {
		margin-right: 20rpx;
		padding: 3rpx 30rpx;
		font-size: 24rpx;
		color: #F19736;
		border: 1rpx solid #F19736;
		border-radius: 20rpx;
	}

	.Address {
		display: flex;
		height: 200rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		color: #999999;
		border-bottom: 2rpx solid #E4E4E4;
	}

	.Address>view:nth-of-type(1) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 610rpx;
	}

	.Address>view:nth-of-type(1)>view:nth-of-type(1) {
		margin-bottom: 10rpx;
		padding-left: 40rpx;
	}

	.Address>view:nth-of-type(1)>view:nth-of-type(1)>text:not(:first-of-type) {
		margin-left: 30rpx;
	}

	.Address>view:nth-of-type(1)>view:nth-of-type(2)>text:first-of-type {
		display: inline-block;
		width: 40rpx;
	}

	.Address>view:nth-of-type(2) {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60rpx;
	}

	.OrderGoods {
		display: flex;
		padding: 10rpx 40rpx;
		font-size: 28rpx;
		border-bottom: 2rpx solid #E4E4E4;
	}

	.OrderGoods>image {
		width: 230rpx;
		height: 170rpx;
	}

	.OrderGoods>view {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 410rpx;
		padding: 0 0 0 30rpx;
	}

	.OrderGoods>view>view {
		display: flex;
		justify-content: space-between;
	}

	.OrderGoods>view>view>text:nth-of-type(2) {
		color: #3478F7;
	}

	.OrderGoods>view>text:nth-of-type(1) {
		color: #999999;
	}

	.OrderGoods>view>text:nth-of-type(2) {
		color: #FF0000;
	}

	.Bottom {
		margin-bottom: 120rpx;
	}

	.Footer {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		font-size: 28rpx;
		background-color: #FFFFFF;
	}

	.Footer>view:nth-child(1) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 120rpx;
		color: #999999;
	}

	.Footer>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 120rpx;
		color: #999999;
	}

	.Footer>view:nth-child(2)>text:nth-of-type(1) {
		font-size: 34rpx;
		color: #FF0000;
	}

	.Footer>view:nth-child(3) {
		width: 350rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}
</style>
